<template>
    <a-modal :title="title" :width="1024" :destroyOnClose="true" :maskClosable="false"
             :visible="visible" @cancel="handleCancel" :footer="false"
    >
        <a-list :grid="{ gutter:8, column: 4 }"
                :loading="ListLoading"
                :pagination="pagination"
                :data-source="dataSource">
            <a-list-item slot="renderItem" slot-scope="item, index">
                <a-card :hoverable="true">
                    <NewsPreview :description="item.mediaDescription" slot="cover"/>
                    <a-row>
                        <a-col :span="22" class="text-ellipsis" :title="item.mediaName">
                            {{item.mediaName}}
                        </a-col>
                        <a-col :span="2">
                            <a-button shape="circle" icon="check" size="small" @click="onSelect(item)"/>
                        </a-col>
                    </a-row>
                </a-card>
            </a-list-item>
        </a-list>
    </a-modal>
</template>
<script>

    import {getMaterailFileList}  from '../../../../../util/internal.api'
    import {pagination} from "../../public/colums";
    export default {
        components:{
            NewsPreview:()=>import('./NewsPreview')
        },
        data() {
            return {
                loading: false, //按钮Loading
                visible: true, //modal 显示状态
                mediaId: null,
                title: "素材选择器",
                dataSource: [],
                pagination: {
                    ...pagination,
                    pageSize: 8,
                    onChange: current => {
                        this.pagination.current = current;
                        this.getMaterialList();
                    }
                },
                searchData: {mediaType: 'news'}
            };
        },
        methods: {
            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeModal', {render: false});
            },
            //完成监听
            onSelect(obj) {
                let mediaObj = {
                    mediaName:obj.mediaName,   //素材名称
                    mediaId : obj.mediaId, //素材ID
                    articles : JSON.parse(obj.mediaDescription ) //素材预览数据
                }
                this.visible = false;
                this.$emit('closeModal', {render: true, data: mediaObj});
            },
            getMaterialList() {
                this.ListLoading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchData); //删除对象中的空值
                getMaterailFileList(this.pagination, searchData).then(res => {
                    this.ListLoading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
        },
        created() {
            this.getMaterialList();
        }
    };
</script>
